<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>分享游记</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="../css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="../lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="../css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="../css/loadingCss/fakeloader.css" />
		<link rel="stylesheet" type="text/css" href="../css/loadingCss/loading_css.css" />
		<style type="text/css">
			body {
				border: 1px solid #FFFFFF;
			}
			
			.writeSharing_main {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				margin-top: 20px;
			}
			
			.app_head_left {
				float: left;
				width: 8%;
				padding-top: 6px;
				padding-left: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 84%;
				padding-top: 5px;
			}
			
			.app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.55em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			.writeSharing_mid {
				padding-top: 95px;
			}
			/*添加游记分享内部样式*/
			
			.jbMain input {
				border: none;
				float: right;
				width: 95%;
				outline: none;
				border-radius: 5px;
				height: 100%;
				color: #666666;
				font-size: 17px;
				padding-left: 5px;
				background-color: #FFFFFF;
			}
			
			.jbMain {
				width: 80%;
				height: 45px;
				margin-left: 10%;
				border: 1px solid #BFBFBF;
				border-radius: 5px;
				margin-bottom: 20px;
				text-align: center;
				background-color: #FFFFFF;
			}
			
			#xbText_input {
				font-size: 17px;
				width: 80%;
				margin-left: 10%;
				height: 100px;
				border-radius: 6px;
				padding-left: 1em;
				padding-top: 7px;
				border: 1px solid #BFBFBF;
				color: #666666;
				outline: none;
			}
			/*提交按钮*/
			
			.clickBtn {
				font-size: 18px;
				width: 40%;
				height: 40px;
				border-radius: 8px;
				display: block;
				background-color: #01A3F8;
				text-align: center;
				line-height: 39px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
				margin-top: 80px;
			}
			
			.cannotClick {
				font-size: 18px;
				width: 40%;
				height: 40px;
				border-radius: 8px;
				display: block;
				background-color: #DCDCDC;
				text-align: center;
				line-height: 40px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
				margin-top: 80px;
			}
			/*照片区域*/
			
			.myPhotoImg {
				width: 80px;
				height: 83px;
				float: left;
				margin-right: 10px;
			}
			
			#myPhotoList {
				float: left;
			}
			
			.photoArea {
				margin-top: 18px;
				height: 90px;
				width: 80%;
				margin-left: 10%;
			}
			
			#addPhotoBtn {
				float: left;
				border: 2px solid #D4D4D4;
				width: 85px;
				height: 85px;
				border-radius: 5px;
				text-align: center;
			}
			
			#addIcon {
				width: 50%;
				height: 50%;
				margin-top: 25%;
			}
			/*底部弹出框  选择照片类型*/
			
			.bottomTC {
				width: 100%;
				height: 185px;
				position: fixed;
				bottom: 0;
				background-color: #FFFFFF;
				opacity: 0.9;
				text-align: center;
				z-index: 101;
			}
			
			.bottomTC h1 {
				width: 95%;
				margin-left: 2.5%;
				height: 50px;
				font-size: 1.35em;
				line-height: 48px;
				border-bottom: 1px solid #DEDEDE;
			}
			
			.photo_type {
				width: 80%;
				margin-left: 10%;
				height: 25%;
				border-bottom: 1px solid #DEDEDE;
				color: #666666;
				font-size: 18px;
				line-height: 40px;
			}
			
			.photo_type:last-child {
				border: none;
			}
			
			.bitianImg {
				display: block;
				margin-top: 9px;
				float: left;
				width: 10%;
				position: relative;
				left: 3px;
			}
			/*图片清空按钮*/
			
			#delBtnArea {
				float: left;
				right: 45px;
				width: 35px;
				height: 35px;
				margin-top: 25px;
				margin-left: 10px;
			}
			
			.doudong {
				-webkit-animation-name: buzz-out;
				-webkit-animation-duration: 0.75s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-iteration-count: 10000;
			}
			/*----抖动效果----*/
			
			@-webkit-keyframes buzz-out {
				10% {
					-webkit-transform: translateX(3px) rotate(3deg);
				}
				20% {
					-webkit-transform: translateX(-2px) rotate(-2deg);
				}
				30% {
					-webkit-transform: translateX(3px) rotate(3deg);
				}
				40% {
					-webkit-transform: translateX(-2px) rotate(-2deg);
				}
				50% {
					-webkit-transform: translateX(2px) rotate(2deg);
				}
				60% {
					-webkit-transform: translateX(-1.5px) rotate(-1.5deg);
				}
				70% {
					-webkit-transform: translateX(2px) rotate(2deg);
				}
				80% {
					-webkit-transform: translateX(-1.5px) rotate(-1.5deg);
				}
				90% {
					-webkit-transform: translateX(1px) rotate(1deg);
				}
				100% {
					-webkit-transform: translateX(-1px) rotate(-1deg);
				}
			}
			
			#delPicBtn {
				width: 100%;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
			}
			
			.mask {
				position: fixed;
				top: 0;
				height: 100%;
				width: 100%;
				z-index: 100;
			}
			
			html,
			body {
				height: 100%;
			}
			
			.weui-row {
				background-color: #FFFFFF;
				margin-top: 15px;
			}
			/*弹框内容部分*/
			
			.myMain {
				margin-top: 70px;
			}
			/*吉林城市列表ul li样式*/
			
			#JL_tourCity_list {
				padding: 15px 40px;
				width: 100%;
			}
			
			#JL_tourCity_list li {
				font-size: 20px;
				width: 40%;
				height: 12%;
				margin-left: 5%;
				margin-right: 5%;
				padding-top: 6.8%;
				font-size: 1.3em;
				font-family: "黑体";
				margin-top: 10%;
				/*box-shadow: 1px 2px 5px #C6F;*/
				border-radius: 50%;
				text-align: center;
				float: left;
			}
			/*城市下所有景点区域*/
			
			#tourPlace_list {
				/*padding: 8px 40px;*/
				width: 100%;
			}
			
			.tourPlace_list_title {
				border-bottom: 1px solid #DEDEDE;
				margin: 10px 15px;
				height: 40px;
			}
			
			#tourPlace_list_title_cityName {
				border-bottom: 3px solid #1296DB;
				margin-left: 15px;
				line-height: 15px;
				display: block;
				height: 39px;
				float: left;
				font-size: 1.5em;
				color: #666666;
				padding: 8px;
			}
			
			#tourPlace_list li {
				color: #444444;
				padding: 10px;
				padding-left: 25px;
				font-weight: bold;
				height: 50px;
				line-height: 28px;
				font-size: 1.16em;
			}
			
			#tourPlace_list li:nth-child(2n) {
				background-color: #EDEDED;
			}
		</style>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var i = 1,
				gentry = null,
				w = null;
			var hl = null,
				le = null,
				de = null,
				ie = null;
			var unv = true;
			var bUpdated = false; //用于兼容可能提前注入导致DOM未解析完更新的问题
			// H5 plus事件处理
			function plusReady() {
				// 获-取摄像头目录对象
				plus.io.resolveLocalFileSystemURL('_doc/', function(entry) {
					entry.getDirectory('camera', {
						create: true
					});
				});
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
			//			var em = null,
			//				map = null;
			//			// H5 plus事件处理
			//			function plusReady() {
			//				// 确保DOM解析完成
			//				if(!em || !window.plus || map) {
			//					return
			//				};
			//				map = new plus.maps.Map("map");
			//			}
			//			if(window.plus) {
			//				plusReady();
			//			} else {
			//				document.addEventListener("plusready", plusReady, false);
			//			}
			//			// DOMContentloaded事件处理
			//			document.addEventListener("DOMContentLoaded", function() {
			//				em = document.getElementById("map");
			//				plusReady();
			//			}, false);
		</script>
	</head>

	<body ontouchstart>
		<div class="writeSharing_main" id="roadSharing_main">
			<div class="index_head">
				<div class="app_head_left">
					<a onclick="roadSharingReturnBtn()" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p class="app_head_title">分享实时路况</p>
				</div>

			</div>
			<div class="writeSharing_mid">
				<form id="lkfx_form" action="http://111.26.219.36:9876/JLCXServlet" method="post" onsubmit="return sub();">
					<input type="hidden" name="type" value="save_road_share" />
					<!--选择景点-->
					<div class="jbMain">
						<input type="text" maxlength="20" name="ROADNAME" id="roadAreaInput" placeholder="输入路段" onkeyup="yzTjBtn1(this)" />
						<input type="hidden" name="USERNAME" id="mySCENIC" value="" />
						<input type="hidden" name="FLAG" value="2" />
					</div>

					<!--有机内容-->
					<textarea id="xbText_input" maxlength="2000" name="DESCRIBE" placeholder="分享内容 最多可输入2000字..." onkeyup="yzTjBtn2(this)"></textarea>
					<input type="hidden" name="PICTURE1" class="hiddenPic" id="yj_pic1" value="" />
					<input type="hidden" name="PICTURE2" class="hiddenPic" id="yj_pic2" value="" />
					<input type="hidden" name="PICTURE3" class="hiddenPic" id="yj_pic3" value="" />
				</form>
				<!--选取照片 照片存放区域-->
				<div class="photoArea">
					<div id="myPhotoList"></div>
					<div id="addPhotoBtn">
						<img id="addIcon" src="../img/tour/photo_addIcon.png" />
					</div>
					<!--清空按钮-->
					<div style="display: none;" id="delBtnArea"><img id="delPicBtn" src="../img/tour/del_photoBtn.png" /></div>
				</div>

				<!--提交按钮-->
				<a onclick="sub()" style="display: none;" href="#" id="lkSharing_Btn" class="clickBtn">提&nbsp;&nbsp;交</a>
				<a href="javascript:;" class="cannotClick">提&nbsp;&nbsp;交</a>
			</div>

		</div>
		<div id="jb_choosephotoType" class="bottomTC" style="display: none;">
			<h1>选取方式</h1>
			<div class="photo_type" id="choosePhoto1">拍照</div>
			<div class="photo_type" id="choosePhoto2">从相册中选择</div>
			<div class="photo_type" id="qxBtn">取消</div>
		</div>
		<div class="mask opacity" id="opacityDiv" style="display: none;"></div>

		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/myJS/changeBase64.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="libs/crypto-js.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/aes.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/pad-zeropadding.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/encryption.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			//ajax表单 提交
			function sub() {
				$.ajax({
					cache: true,
					type: "post",
					url: Url,
					data: $("#lkfx_form").serialize(), // form的ID  
					async: false,
					success: function(data) {
						$.alert("已提交至后台审核，感谢您的分享！","提交成功",function(){
							window.location.reload();
						});
					},
					error: function(request) {
						$.alert("网络超时，请您稍后再试","提交失败");
					}
				});
			}

			//保存路况共享信息
			//			type = save_road_share
			//			ROADNAME = 路段名称
			//			USERNAME = 用户名称
			//			DESCRIBE = 路况描述
			//			PICTURE1 = 图片1
			//			PICTURE2 = 图片2
			//			PICTURE3 = 图片3
			function roadSharingReturnBtn() {
				var urlstr = "" + window.location;
				if(urlstr.indexOf("?") != -1) {
					var str = urlstr.split("?")[1];
					console.log(str);
					if(str == "a") {
						window.location.href = "../roadSharing.html";
					}
				} else {
					window.location.href = "javascript:history.go(-1)";
				}
			}

			function xx() {
				var vs = document.getElementsByClassName("hiddenPic");
				console.log("1---------" + vs[0].value);
				console.log("2---------" + vs[1].value);
				console.log("3---------" + vs[2].value);
			}
			var scoreState = "";
			var h = document.documentElement.clientHeight;
			//弹出框右上角的后退按钮
			$("#tanchuReturnBtn").click(function() {
				$("#tourPlace_list").hide(200);
				$("#JL_tourCity_list").show(200);
				$("#title_jd").hide();
				$("#title_jdCity").show();
				$(this).hide();
			});

			$(function() {
				//提取用户名
				var username = JSON.parse(localStorage.userJson)[0].username;
				$("#mySCENIC").val(username);

				//后台地址赋值给表单
				$("#lkfx_form").attr("action", Url);
			});

			function getTourPlace() {
				getJLcityAll();
			}

			//展示吉林所有城市列表 方法
			function getJLcityAll() {
				$("#JL_tourCity_list").height(h - 100);
				var citys = $("#JL_tourCity_list li");
				for(var i = 0; i < citys.length; i++) {
					var shadowStr = getRandomColor();
					var colorStr = shadowStr.substr(12);
					$(citys[i]).css("box-shadow", shadowStr); //随机颜色边框阴影
					$(citys[i]).css("color", colorStr); //随机颜色字体					
				}
			}

			//获取随机颜色 赋值给城市列表
			function getRandomColor() {
				var r = parseInt(Math.random() * 10000) % 256;
				var g = parseInt(Math.random() * 10000) % 256;
				var b = parseInt(Math.random() * 10000) % 256;
				return "1px 2px 5px rgb(" + r + "," + g + "," + b + ")";
				//块元素阴影效果
			}

			//选取城市点击事件
			$("#JL_tourCity_list li").click(function() {
				var cityName = $(this).html(); //所选城市名
				var cityVal = $(this).attr("value"); //所选城市的拼音
				$("#JL_tourCity_list").hide(200);
				$("#tourPlace_list").show(200);
				$("#title_jdCity").hide();
				$("#title_jd").show();
				$("#tanchuReturnBtn").show();
				$("#tourPlace_list_title_cityName").html(cityName);
				$("#tourPlace_list li").remove();
				getCityTourPlace(cityVal);
			});

			//获取该市下的所有景点
			function getCityTourPlace(Area) {
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "tourism_info",
						"AREA": Area
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						if(data.MSG == "成功") {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								d = eval(d);
								for(var i = 0; i < d.length; i++) {
									var jd = d[i].JQMC;
									var recid = d[i].RECID;
									var li = $('<li data-r="' + recid + '" onclick="getMyCityTour(this)">' + jd + '</li>');
									$("#tourPlace_list").append(li);
								}
							} else {
								errMD();
							}
						} else {
							$.alert("暂无数据", "提示");
						}
					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			}

			//点击选取我要分享的景点
			function getMyCityTour(t) {
				$("#closeBtn").click();
				var a = t.innerHTML;
				var b = $(t).attr("data-r");
				$("#myTourPlace").val(a);
				$("#myTourPlace").attr("data-Recid", b);

				//验证提交按钮 如果评分和游记内容都已填写完毕 提交框变蓝
				var inputVal2 = $("#xbText_input").val();
				console.log(scoreState);
				if(scoreState == 1 && inputVal2 != "") {
					$(".cannotClick").hide();
					$("#lkSharing_Btn").show();
				}
			}

			//---------添加图片功能
			//点击添加图片方框
			$("#addIcon").click(function() {
				$("#jb_choosephotoType").slideToggle("fast");
				$("#opacityDiv").show();
			});
			//			var msg = document.getElementById("myPhotoList");

			//转换图片
			function startt(img) {
				var imgFile = new FileReader();
				imgFile.readAsDataURL(img.files[0]);
				imgFile.onload = function() {
					var imgData = this.result; //base64数据    
					imgShow.setAttribute('src', imgData);
					conte.value = imgData;
					len.innerHTML += imgData.length;
				}
			}

			//选取 拍照
			$("#choosePhoto1").click(function() {
				//					console.log('--------调用相机---------');
				//				plus.ready()
				var cm = plus.camera.getCamera();
				cm.captureImage(
					function(path) {
						var picPaht = "file://" + plus.io.convertLocalFileSystemURL(path);
						//						console.log(picPaht);
						var showImg = $('<img class="myPhotoImg" src="' + picPaht + '"/>');
						var portImg = new Image();
						portImg.src = picPaht;
						portImg.onload = function() { //必须要用load，这地方把我坑的不轻。。。
							var srcStr = getBase64Image(portImg, 360, 640);
							var hiddens = document.getElementsByClassName("hiddenPic");
							var hidden = hiddens[$(".myPhotoImg").length - 1]; //当前已取到的照片个数 为要给隐藏框赋值的下标第-1个
							hidden.value = getBase64Image(portImg, 360, 640);
						}
						$("#myPhotoList").append(showImg);

					},
					function(error) {
						//msg.innerHTML = error.Message;
					}
				)
			});
			//点击从相册选择
			$("#choosePhoto2").click(function() {
				//					console.log('--------相册---------');
				plus.gallery.pick(
					function(path) {
						var pathFileName = path.files[0];
						img = '<img class="myPhotoImg" src="' + pathFileName + '"/>';
						var img_my = new Image();
						img_my.src = pathFileName;
						img_my.onload = function() {
							var hiddens = document.getElementsByClassName("hiddenPic");
							var hidden = hiddens[$(".myPhotoImg").length - 1];
							hidden.value = getBase64Image(img_my, 360, 640);
						}
						var Img = $(img);
						$("#myPhotoList").append(Img);
						//						var nowPicLength = $("#myPhotoList").children().length;
					},
					function(error) {
						//msg.innerHTML = error.Message;
					}, {
						filter: "image",
						multiple: true,
						maximum: 1,
						//						3 - $("#myPhotoList").children().length * 0.5, // 最多选择3张图片
						system: false
					}
				)
			});

			function getMyphoto() {
				img_my.onload = function() {
					var myPhotoImg = document.getElementsByClassName("myPhotoImg");
					//当前要存入hidden第一张图片的下标为 已有图片-1+i
					//								var index = parseInt(i)+parseInt(myPhotoImg.length-1);
					var hiddens = document.getElementsByClassName("hiddenPic");
					console.log(i);
					console.log(myPhotoImg.length);
					//								console.log(index);
					hiddens[i].value = getBase64Image(img_my, 360, 640);
				}
			}

			//监听存放照片的div存放个数
			$("#myPhotoList").on('DOMNodeInserted', function(e) { //由于删除的小垃圾箱 每选取一张照片触发两次事件
				if($("#myPhotoList").children().length > 2) { //减去垃圾箱个数 值除以2
					$("#addPhotoBtn").hide();
				} else {
					$("#addPhotoBtn").show();
				}
				if($("#myPhotoList").children().length > 0) {
					$("#delBtnArea").show();
				} else {
					$("#delBtnArea").hide();
				}
			});

			//清空已选的照片 方法
			$("#delBtnArea").click(function() {
				$(this).addClass("doudong");
				$.confirm("您是否要清空所选图片", "提示", function() {
					//确认后回调函数
					$("#myPhotoList img").fadeOut(500);
					$("#delBtnArea").removeClass("doudong");
					$("#delBtnArea").hide();
					$(".hiddenPic").val(""); //清空三个隐藏框的图片字符串
					setTimeout(function() {
						$("#myPhotoList").html("");
						$("#addPhotoBtn").show();
					}, 600);
				});

			});

			//			function delPhoto(t) {
			//				for(var i = 0; i < $("#myPhotoList .delPhotoA").length; i++) {
			//					if($("#myPhotoList img")[i] == $(t)) {
			//						console.log(i);
			//					}
			//				}
			//				if($("#myPhotoList").children().length <= 6) {
			//					$("#addPhotoBtn").show();
			//				}
			//				$(t).parent().prev().remove(); //删除此张图片
			//				$(t).parent().remove(); //删除此张图片下的小垃圾箱
			//
			//
			//			}

			//			function run(input_file, get_data) {
			//				/*input_file：文件按钮对象*/
			//				/*get_data: 转换成功后执行的方法*/
			//				/*图片转Base64 核心代码*/
			//				var file = input_file;
			//				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件  
			//				var reader = new FileReader();
			//				reader.onload = function() {
			//					get_data(this.result);
			//				}
			//				reader.readAsDataURL(file);
			//			}

			//点击所有按钮 包括取消
			$(".photo_type,#opacityDiv").click(function() {
				$("#jb_choosephotoType").slideToggle("fast"); //关闭弹窗
				$("#opacityDiv").hide(); //隐藏遮罩层
			});

			//两个输入框keyuup事件
			function yzTjBtn1(t) {
				if($("#roadAreaInput").val()!=""&&$("#xbText_input").val()!="") {
					$(".cannotClick").hide();
					$("#lkSharing_Btn").show();
				} else {
					$("#lkSharing_Btn").hide();
					$(".cannotClick").show();
				}

			}
			function yzTjBtn2(t){
				if($("#roadAreaInput").val()!=""&&$("#xbText_input").val()!="") {
					$(".cannotClick").hide();
					$("#lkSharing_Btn").show();
				} else {
					$("#lkSharing_Btn").hide();
					$(".cannotClick").show();
				}
			}

			//			function toVaild() {
			//				$("input[name='USERNAME']").val(obj2_true);
			//				var con = $("#textarea_share").val();
			//				var ld_name = $("#ld_name").val();
			//				var use_id = $("#use_id").val();
			//				if(ld_name == "") {
			//					alert("请输入路段名称！！！")
			//					return false;
			//				}
			//				if(con == "") {
			//					alert("请输入路况共享内容！！！")
			//					return false;
			//				}
			//				if(use_id == "") {
			//					alert("请先登录！！！")
			//					return false;
			//				}
			//				if(ld_name != "" && con != "") {
			//					return true;
			//				}
			//
			//				//保存游记分享
			//				//type=save_travel_notes
			//				//SCENIC=景点名称
			//				//CREATEPERSON=用户名
			//				//NOTES=游记内容
			//				//TRAVELSTIME=评论时间
			//				//PICTURE1=图片1
			//				//PICTURE2=图片2
			//				//PICTURE3=图片3
			//				//SCORE=评分
			//			}
		</script>
	</body>

</html>